<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <title>飞腾会-FitaClub</title>
  <%@ include file="/WEB-INF/include/meta.jsp" %>
  <%@ include file="/WEB-INF/include/css.jsp" %>
</head>
<!-- end header -->

<body>
<div class="page-group">
  <div class="page page-current bg-light-gray">
    <header class="bar bar-nav fita-header wallet-header">
      <a href="javascript:history.back(-1);" class="icon icon-left pull-left"></a>
      <a class="icon icon-menu pull-right open-panel"></a>
      <h1 class="title">我的钱包</h1>
    </header>
    <div class="bar bar-footer fita-footer row no-gutter profile-footer">
      <a href="${ctx.host}/profile/recharge" class="button col-50">充值</a>
      <a href="${ctx.host}/profile/withdraw" class="button col-50">提现申请</a>
    </div>
    <div class="content profile-wallet-content">
      <div class="wallet-detail row no-gutter">
        <div class="col-33"><span class="price">￥<fmt:formatNumber value="${(freezeAmount + userWallet.amount)/100}"
                                                                   minFractionDigits="2"></fmt:formatNumber></span>钱包余额
        </div>
        <div class="col-33"><span class="price">￥<fmt:formatNumber value="${userWallet.amount/100}"
                                                                   minFractionDigits="2"></fmt:formatNumber></span>可提现
        </div>
        <div class="col-33"><span class="price">￥<fmt:formatNumber value="${userWallet.frozenAmount/100}"
                                                                   minFractionDigits="2"></fmt:formatNumber></span>锁定中
        </div>
      </div>

      <div style="margin: .5rem .5rem .5rem 1rem; font-size: .65rem; color: #333; font-weight: 600;">
        累计收入：<fmt:formatNumber value="${userWallet.totalAmount}" minFractionDigits="2"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;累计支出：<fmt:formatNumber
              value="${userWallet.consumeAmount}" minFractionDigits="2"></fmt:formatNumber></div>
      <div class="content-block-title" style="margin-left: .5rem; margin-right: .5rem;">收支明细</div>
      <div class="list-content">
        <div class="list-block list-container" style="margin: .5rem;">

          <c:forEach items="${transactionRecords}" var="tr">
            <c:if test="${tr.transactionType.agentDistributionReward}">
              <div class="item-content">
                <div class="item-inner">
                  <div class="col-50 detail">
                    <p class="no-margin">订单提成：${tr.distributionRewardRecord.targetUserWallet.agent.name}</p>
                    <p class="no-margin"> <fmt:formatDate value="${tr.distributionRewardRecord.createTime}" pattern="yyyy-MM-dd"></fmt:formatDate></p>
                  </div>
                  <div class="col-50 royalty">
                    <div class="color-green price">+${tr.distributionRewardRecord.amount /100}</div>
                    <c:if test="${tr.distributionRewardRecord.status.unconsumed}">
                      <p class="no-margin">（${tr.distributionRewardRecord.status.description}）</p>
                    </c:if>
                  </div>
                </div>
              </div>
            </c:if>
          </c:forEach>

        </div>
      </div>
    </div>
  </div>

  <div class="panel-overlay"></div>
  <div class="panel panel-right panel-cover fita-panel">
    <div class="list-block contacts-block no-margin">
      <p class="menu-title close-panel">关闭</p>
      <ul>
        <li>
          <a href="${ctx.host}/cars/search" class="item-content item-link">
            <div class="item-inner">
              <div class="item-title">立即租车</div>
            </div>
          </a>
        </li>
        <li>
          <a href="${ctx.host}/profile" class="item-content item-link">
            <div class="item-inner">
              <div class="item-title">个人中心</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- <a ctx.host="/order/order-staying-list">保留预定</a>
<a ctx.host="/order/order-unpaid-list">未支付</a>
<a ctx.host="/order/order-paid-list">已支付</a>
<a ctx.host="/order/order-finished-list">已完成</a> -->
<%@ include file="/WEB-INF/include/script.jsp" %>
<d:resource type="script" root="${ctx.resource}/build" src="js/page/profile/profile-wallet.js"/>
<script type="text/javascript">
    require(['page/profile/profile-wallet'], function (page) {
        page.init()
    })
</script>

</body>
</html>